<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>红绿灯</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			ul {
				margin: 200px;
			}

			li {
				list-style: none;
				width: 80px;
				height: 80px;
				border-radius: 50%;
				float: left;
				margin: 20px;
				opacity: .1;
			}

			#red {
				background: red;
			}

			#green {
				background: green;
			}

			#yellow {
				background: yellow;
			}

			.red #red,
			.green #green,
			.yellow #yellow {
			opacity: 1;
			}
		</style>
	</head>
	<body>
		<ul id="list" class="">
			<li id="red"></li>
			<li id="yellow"></li>
			<li id="green"></li>
		</ul>

		<script type="text/javascript">
			let oList = document.getElementById("list");
			let oLi = oList.children;
			oList.className = "red";

			function apromise(t) {
				return new Promise(function(resolve, reject) {
					setTimeout(resolve, t)
				})
			}

			function stat() {
				apromise(8000).then(function() {
					oList.className = "yellow";
					return apromise(5000);
				}).then(function() {
					oList.className = "green";
					return apromise(10000);
				}).then(function() {
					oList.className = "red";
					stat();
				})
			}
			stat();
		</script>
	</body>
</html>
